<template>
  <div>
    <input
      type="checkbox"
      :checked="todo.completed"
      @change="toggleTodo(todo.id)"
    />
    <span :class="{ completed: todo.completed }">{{ todo.content }}</span>
    <button @click="removeTodo(todo.id)">Remove</button>
  </div>
</template>

<script setup>
import { inject } from "vue";

const { toggleTodo, removeTodo } = inject("todoMethods");
const props = defineProps({ todo: Object });
</script>

<style lang="scss" scoped>
.completed {
  text-decoration: line-through;
}
</style>